<!-- eslint-disable vue/prop-name-casing -->
<script>
import jsonEdit from '@/components/AppCreate/task/jsonEdit.vue'
import edgeCodeEdit from '@/components/AppCreate/task/edgeCodeEdit.vue'
import { getToolID } from '@/api/tool'

export default {
  components: {
    jsonEdit,
    edgeCodeEdit
  },
  props: {
    task_id: {
      type: Number,
      required: true,
      default: null
    },
    tool_id: {
      type: Number,
      required: true,
      default: null
    },
    sub_task_args: {
      type: Array,
      required: true,
      default: null
    },
    old_front_code: {
      type: String,
      required: true,
      default: null
    },
    old_end_code: {
      type: String,
      required: true,
      default: null
    }
  },
  data() {
    return {
      // 前置与后置的代码
      front_code: this.old_front_code,
      end_code: this.old_end_code,
      // 选择工具的参数
      task_args: this.sub_task_args,
      // 工具名称
      tool_name: '',
      // 存储工具在数据库中的参数
      originToolParams: {},
      // 智能匹配参数相关
      showLLMCode: false,
      llm_gene_code: '',
      // 保存文件
      binaryFile: {},
      // 与上一页面同步的MemoryBus
      memoryBus: {},
      memoryBusVisible: false,
      frontMemoryBus: {},
      postMemoryBus: {},
      memoryBusPosition: 0 // 0 代表展示前置代码的 memoryBus，1 代表展示后置代码的 memoryBus
    }
  },
  watch: {
    sub_task_args: {
      deep: true,
      handler(val) {
        // console.log('dashboard更新参数们', val)
        this.task_args = val // 更新参数
        this.getToolOrigin() // 重新获取任务信息
      }
    },
    old_front_code: {
      handler(val) {
        this.front_code = val
      }
    },
    old_end_code: {
      handler(val) {
        this.end_code = val
      }
    }
  },
  created() {
    this.getToolOrigin()
  },
  methods: {
    // 获取任务信息
    async getToolOrigin() {
      // 获取工具的 tool 详情，补全信息
      const tool = await getToolID(this.tool_id)
      this.tool_name = tool.name
      this.originToolParams = tool.parameters
      // console.log('获取工具名称')
    },
    // 更新前置代码 memoryBus
    async setFrontMemoryBus(newMemoryBus) {
      await this.$set(this, 'frontMemoryBus', newMemoryBus)
    },
    // 更新后置代码 memoryBus
    async setPostMemoryBus(newMemoryBus) {
      await this.$set(this, 'postMemoryBus', newMemoryBus)
    },
    // 更新 memoryBus
    async setMemoryBus(newMemoryBus) {
      // console.log('为 task' + this.task_id + ' 分配的 memoryBus', newMemoryBus)
      await this.$set(this, 'memoryBus', newMemoryBus)
    },
    // 规整对应参数的内容
    formatArgument(id) {
      this.$delete(this.task_args[id], 'sourceType')
      this.$delete(this.task_args[id], 'sourceData')
      // 自动填充完成，替换工具的 params 参数
      this.task_args[id] = { ...this.originToolParams[id] }
    },
    // 获取MemoryBus并弹窗来展示
    async getMemoryBus(pos) {
      this.memoryBusPosition = pos
      // 刷新 memoryBus
      await this.refreshMemoryBus()
      // 弹出弹窗
      this.memoryBusVisible = true
    },
    // 向父组件发送task的有关信息
    getTaskInfo() {
      const info = {
        'task_id': this.task_id,
        'pre_code': this.front_code,
        'tool_id': this.tool_id,
        'parameters': [],
        'post_code': this.end_code
      }
      // 获取每一个子参数的有关信息
      for (const key in this.task_args) {
        info['parameters'].push(this.$refs['arg' + key][0].getArgInfo())
      }
      return info
    },
    // 清空子参数的选择
    clearTaskArgs() {
      for (const key in this.task_args) {
        this.$refs['arg' + key][0].resetArgument()
      }
    },
    // 保存文件
    saveFile(file) {
      this.binaryFile['file'] = file
    },
    refreshMemoryBus() {
      this.$emit('refresh_memory_bus')
    },
    // 暂存前后置代码信息
    savePreCode() {
      return this.front_code
    },
    savePostCode() {
      return this.end_code
    }
  }
}
</script>

<template>
  <div>
    <!-- 背景上色部分-->
    <div class="json-coloring app-container">
      <!-- 任务的基本信息部分，如任务ID与任务名 -->
      <div class="task-head">
        <p>
          <span style="font-weight: bold">{{ $t('toolName') }}：</span>
          {{ tool_name }}
        </p>
      </div>
      <!-- 前置代码部分 -->
      <edge-code-edit v-model="front_code" :is_front="true" @get_memory_bus="getMemoryBus(0)" />
      <!-- 工具部分 -->
      <el-divider>{{ $t('tool') }}</el-divider>
      <!-- json展示与修改的部分-->
      <json-edit
        v-for="(item, key) in task_args"
        :ref="'arg' + key"
        :key="key"
        :sub_task_arg="item"
        :arg_key="key"
        :memory_bus="memoryBus"
        @format_argument="formatArgument"
        @save-file="saveFile"
        @refresh_memory_bus="refreshMemoryBus"
      />
      <!-- 后置代码部分 -->
      <edge-code-edit v-model="end_code" :is_front="false" @get_memory_bus="getMemoryBus(1)" />
    </div>
    <!-- 弹出MemoryBus的部分 -->
    <el-dialog :visible.sync="memoryBusVisible" title="Memory Bus 的内容如下:">
      <json-viewer v-if="!memoryBusPosition" :value="frontMemoryBus" :expand-depth="3" />
      <json-viewer v-else :value="postMemoryBus" :expand-depth="3" />
    </el-dialog>
  </div>
</template>

<style scoped>
.json-coloring {
  /* background-color: #f8f8f5;*/
  background-color: white;
}

.app-container {
  left: 0;
  padding-top: 1px;
  width: 100%;
}
</style>
